<template>
    <!-- 标签页导航 -->
    <div class="home" v-infinite-scroll="load">

        <div class="listen-nav">
            <van-tabs class="nav-tabs" @click-tab="toSubject" v-model:active="active" title-inactive-color="'#a7a7b0'"
                title-active-color="'#464652'">
                <van-tab class="nav-tab" v-for="(item, index) in categoriesList" :key="index" :title="item.title">

                    <ListContainer v-for="(item, index) in subjectList" :key="index" :item="item"></ListContainer>
                </van-tab>
            </van-tabs>
            <!-- 最右侧按钮 -->
            <div class="button" @click="changeTab">
                <van-icon class="nav-icon" color="#aca7ad" name="arrow-down" size="14" />
            </div>
        </div>

        <!-- 点击按钮展示的数据 -->
        <div class="tabList" v-if="isShowTab">
            <div class="line">请选择分类</div>
            <div class="tab-item">
                <div class="item">
                    <div @click="changeTabs(index)" class="item-a" v-for="(item, index) in categoriesList" :key="item.cid">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { Button } from 'vant';
import listenApi, { type TabsItemModel, SubjectsModel } from '@/api/listening'
import ListContainer from '../list-container/index.vue'

import { useRouter } from 'vue-router';
const router = useRouter();
// 点击每一项传相应的值到主题/获取到/后面的数据
const title = ref('remen')
const toSubject = async (e: any) => {
    subjectList.value = []
    const name = categoriesList.value[e.name]

    title.value = name.name
    router.push({
        name: 'ListeningList',
        params: {
            title: title.value
        }
    });
    getsubjectList()
}
const load = async () => {

    if (subjectList.value!.length <= total.value) {
        page.value++
        getsubjectList()
    }
}

const subjectList = ref<SubjectsModel[]>([])
const page = ref(1)
const size = ref(10)
const total = ref()
const getsubjectList = async () => {
    let result = await listenApi.getSubjectList(title.value, page.value, size.value)
    // subjectList.value = result.subjects

    subjectList.value = subjectList.value.concat(result.subjects)
    total.value = result.totalCount

}




// 当前在哪个页面,控制tab切换
const active = ref(1)
const isShowTab = ref(false)
// 控制下拉框的显示和隐藏
const changeTab = () => {
    isShowTab.value = !isShowTab.value

}

// 点击下拉菜单跳转对应的tab
const changeTabs = (e: number) => {
    subjectList.value = []

    active.value = +e
    isShowTab.value = false

    const a = categoriesList.value[active.value]

    router.push({
        name: 'ListeningList',
        params: {
            title: a.name
        }
    });
    title.value = a.name
    getsubjectList()
}

// tsbs列表数据
const categoriesList = ref<TabsItemModel[]>([])
const getListenList = async () => {
    try {
        let result = await listenApi.getTabsList()
        categoriesList.value = result.categories
    } catch (error) {
        console.log(error);
    }
}

defineComponent({
    name: 'index',
    comments: {
        [Button.name]: Button
    }
})


onMounted(() => {
    getListenList()
    getsubjectList()
})




</script>
  
<script setup lang="ts">

</script>
  
<style lang="scss" scoped>
.home {
    height: 1000px;
    overflow-y: auto;

    // 标签页导航
    .listen-nav {

        width: 100%;
        height: 45px;
        display: flex;
        background-color: #fff;
        border-bottom: 1px solid #e8e8e8;
        position: relative;


        ::v-deep .van-tabs--line .van-tabs__wrap {
            height: 100%;
            width: 332px;
            position: relative;
            bottom: 0;
            left: 0;
            border-right: 1px solid #e8e8e8;
        }

        ::v-deep .van-tab--grow {
            font-size: 14px;
            color: #b1b1b8;
        }

        ::v-deep .van-tab--active {
            color: #40404c;
            font-size: 18px;
        }

        ::v-deep .van-tabs__line {
            background-color: #f06742;
            bottom: 15px;
        }

        .button {
            cursor: pointer;

            .nav-icon {
                position: absolute;
                right: 13px;
                bottom: 15px;
            }

        }


    }

    .tabList {

        width: 100%;
        position: relative;
        background-color: rgba(255, 255, 255, 0.987);

        // z-index: 33;
        .line {
            font-size: 15px;
            color: #b1b1b8;
            margin-left: 20px;
        }

        .tab-item {
            padding: 10px;
            box-sizing: border-box;
            text-align: center;

            .item {
                width: 100%;

                .item-a {
                    width: 20%;
                    font-size: 16px;
                    display: inline-block;
                    background-color: #f3f4f5;
                    color: #40404c;
                    padding: 5px 15px;
                    margin: 5px;
                }
            }
        }
    }
}
</style>
